<html>
  <head>
    <meta charset="utf8">
  </head>
  <body>
    <!-- 挂载点 -->
    <div id='vue-app'></div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      let options = {
        // 模板
        template: `
          <div>
            <span>姓名</span>
            <span>{{name}}</span>
          </div>
          <div>
            <span>性别</span>
            <span>{{gender}}</span>
          </div>
          <div>
            <span>电话</span>
            <span>{{phone}}</span>
          </div>
        `,
        // 数据中心
        data: function() {
          return {
            name: '',
            gender: '',
            phone: ''
          }
        },
        // 被挂载后执行
        mounted: function() {
          let id = new URLSearchParams(location.search).get('id')
          axios.get('/user?id=' + id).then((res) => {
            data = res.data.data
            //console.log(data)
            this.name = data.name
            this.gender = data.gender
            this.phone = data.phone
          })
        }

      }
      let ppz = Vue.createApp(options)
      ppz.mount('#vue-app')
    </script>
  </body>
</html>